iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Mobile Development

從開發瀏覽器 APP 學習 Android 實戰技巧,並搭上 Jetpack Compose 的列車系列 第 25

[Day24] 從開發瀏覽器 APP 學習 Android 實戰技巧 -- 多指手勢操作 II 防誤觸縮放

  • 分享至 

  • xImage
  •  

在 Android 中有內建 ScaleGestureDetector 可以讓我們省下自己實作縮放手勢的功能。我們要先在原先的 MultitouchListener 中建立一個 ScaleGestureDetector,並且也把事件都傳給它。

https://ithelp.ithome.com.tw/upload/images/20221004/20140260p6P4hXXmK3.png

scaleListener 是用來收 onScale 事件用的。我們可以在這個函式中收到改變後的縮放比例,然後決定怎麼利用這個縮放值來做應用。下面可以看到,scaleFactor 會用來記錄 onScale 來的比例。

https://ithelp.ithome.com.tw/upload/images/20221004/20140260GEb7nWuXt7.png

完成 ScaleGestureDetector 實作後,還要針對原先的 MultitouchListeneronTouch 函式做適點的修改:

ACTION_POINTER_DOWN

將 scaleFactor 先初始化成 1.0

ACTION_POINTER_UP

這裡使用到的 isValidSwipe() 需要加入對於縮放的判斷 (85行)。而在 isScaling()中,則是多了另一個 threshold 來避免小幅度的移動,造成縮放的誤判。

https://ithelp.ithome.com.tw/upload/images/20221004/20140260xol8yyTAts.png

以上,就完成了對於縮放手勢的區別。

至於,關於多指手勢的功能設定,也都是利用 Android 原生的 preference xml 完成的,就不展開解釋了,大家可以看看下面完成後的畫面。

示範畫面

https://ithelp.ithome.com.tw/upload/images/20221004/20140260VttPP6qvc1.png

https://ithelp.ithome.com.tw/upload/images/20221004/201402603AtHaPEesy.png

以我自己來說,我習慣將多指手勢操作定義如下:

  • 往上滑:顯示書籤列表
  • 往下滑:關閉當前分頁
  • 往左滑:顯示下一個分頁
  • 往右滑:顯示前一個分頁

相關連結

Commit: 防止誤觸縮放功能


上一篇
[Day23] 從開發瀏覽器 APP 學習 Android 實戰技巧 -- 多指手勢操作 I
下一篇
[Day25] 從開發瀏覽器 APP 學習 Android 實戰技巧 -- 開發屬於自己的 Android Studio Plugin
系列文
從開發瀏覽器 APP 學習 Android 實戰技巧,並搭上 Jetpack Compose 的列車31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言